﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <!--<style>
        .box {
            border: 1px solid #f00;
            width:500px;
            margin: 50px auto;
        }
        .box::after{
            display:table;
            content:'';
            clear:both;
        }
        .item{
            float:left;
            width:50px;
            border-radius:15px;
            transition:all linear 0.8s;
        }
        .item img {
            width: 200px;
        }
        .item:hover, .item.active {
            width: 200px;
        }
        .item.closed {
            width: 0px;
        }

        .xuanzhuan {
            animation: around 3s linear .1s;
            -webkit-animation: around 3s linear .1s;
            -o-animation: around 3s linear .1s;
            -moz-animation: around 3s linear .1s;

            transform-origin: left bottom;
            -moz-transform-origin: left bottom;
            -o-transform-origin: left bottom;
            -webkit-transform-origin: left bottom;
        }
        @keyframes around {
            from{
                transform: rotateX(0deg);
            }
            to {
                transform: rotateX(-360deg);
            }
        }
        @-moz-keyframes around {
            from {
                transform: rotateX(0deg);
            }

            to {
                transform: rotateX(-360deg);
            }
        }
        @-o-keyframes around {
            from {
                transform: rotateX(0deg);
            }

            to {
                transform: rotateX(-360deg);
            }
        }
        @-webkit-keyframes around {
            from {
                transform: rotateX(0deg);
            }
            to {
                transform: rotateX(-360deg);
            }
        }
    </style>
    <style>
        .stage_area {
            width: 900px;
            min-height: 100px;
            padding: 100px 50px;
            background-color: #f0f0f0;
            box-shadow: inset 0 0 3px rgba(0,0,0,.35);
            perspective:800px;
        }

         .container {
            width: 128px;
            height: 100px;
            margin-left: 364px;
            transition: transform 1s;
            transform-style: preserve-3d;
        }
        .piece {
            width: 128px;
            box-shadow: 0 1px 3px rgba(0,0,0,.5);
            transition: opacity 1s, transform 1s;
            position:absolute;
            bottom:0;
        }
    </style>-->
    <script>
        $(function () {
            //addActive();
        })
        var i = 0;
        function addActive()
        {

            var num = $(".item").length-1;
            setTimeout(function () {
                i++;
                console.log(i, num);
                $(".item").eq(i).addClass("active").siblings().removeClass("active");
                if (i < num)
                    addActive();
                else
                    addClosed();
            }, 800);
        }
        function addClosed()
        {
            $(".item").addClass("closed").removeClass("active");
            addXuanZhuan(0);
        }


        function addXuanZhuan(x) {
            var num = $(".item").length - 1;
            setTimeout(function () {

                console.log("x", x + '==' + num);
                $(".item").eq(x).addClass("xuanzhuan").siblings()
                if (x < num)
                {
                    x++;
                    addXuanZhuan(x);
                }
                else
                    $(".item").removeClass("xuanzhuan");
            }, 500);
        }

        $(function () {
            //$(".box img").each(function (index,item) {
            //    console.log(item, index);
            //    $(item).addClass("item" + (index + 1));
            //})
            
            //setTimeout(function () {
            //    $(".box").addClass("addRotate");
            //}, 500);

            //setTimeout(function () {
            //    $(".item").addClass("reset");
            //}, 4000);
          
            //setTimeout(function () {
            //    rotateV(5);
            //}, 5000);
            rotateV(5);
        })

        function rotateV(idx)
        {            
            setTimeout(function () {
                $(".item").eq(idx).removeClass("reset").addClass("rotateV");
                if (idx >0)
                {
                    idx--;
                    rotateV(idx);
                }
                
            }, 2000);
        }
    </script>
    <style>
        .stage {
            width: 900px;
            min-height: 300px;
            padding: 100px 50px;
            background-color: #f0f0f0;
            box-shadow: inset 0 0 3px rgba(0,0,0,.35);
            perspective: 1200px;
            margin: 50px auto;
            perspective-origin:left inherit;
        }

        .box {
            transform-style: preserve-3d;
            width: 200px;
            margin: 0 auto;
            transition: transform 6s;
        }
        .addRotate {
            transform: rotateY(360deg);
        }

        .item {
            position: absolute;
            width: 200px;
            margin: 0 auto;
            transition: all 2s;
            border-radius:5px;
            box-shadow: 0 1px 3px rgba(0,0,0,.5);
            /*backface-visibility: hidden;*/
        }
        .item1 {
            transform: rotateY(0deg) translateZ(200px);z-index:1;
        }
        .item2 {
            transform: rotateY(60deg) translateZ(200px);
            z-index: 2;
        }
        .item3 {
            transform: rotateY(120deg) translateZ(200px);
            z-index: 3;
        }
        .item4 {
            transform: rotateY(180deg) translateZ(200px);
            z-index: 4;
        }
        .item5 {
            transform: rotateY(240deg) translateZ(200px);
            z-index: 5;
        }
        .item6 {
            transform: rotateY(300deg) translateZ(200px);
            z-index: 6;
        }
        .reset {
            transform:none;top:0;left:0;
        }
        .rotateV {
            transform: rotateY(-360deg);
            transform-origin: -50px;
            z-index: 0;
        }
    </style>
</head>
<body>

    <!--<div id="stage" class="stage_area" style="top: 197px;">
        <strong class="remind">点击任意图片浏览：</strong>
        <div id="container" class="container" style="transform: rotateY(-1440deg);"><img id="piece1" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="piece" style="transform: rotateY(0deg) translateZ(195.839px);"><img id="piece8" src="http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg" class="piece" style="transform: rotateY(40deg) translateZ(195.839px);"><img id="piece3" src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" class="piece" style="transform: rotateY(80deg) translateZ(195.839px);"><img id="piece4" src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" class="piece" style="transform: rotateY(120deg) translateZ(195.839px);"><img id="piece6" src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" class="piece" style="transform: rotateY(160deg) translateZ(195.839px);"><img id="piece7" src="http://image.zhangxinxu.com/image/study/s/s128/mm7.jpg" class="piece" style="transform: rotateY(200deg) translateZ(195.839px);"><img id="piece10" src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" class="piece" style="transform: rotateY(240deg) translateZ(195.839px);"><img id="piece13" src="http://image.zhangxinxu.com/image/study/s/s128/mm13.jpg" class="piece" style="transform: rotateY(280deg) translateZ(195.839px);"><img id="piece15" src="http://image.zhangxinxu.com/image/study/s/s128/mm15.jpg" class="piece" style="transform: rotateY(320deg) translateZ(195.839px);"></div>
        <input type="button" value="垂直位置还原" class="chrome_fix">
    </div>
    <div class="xuanzhuan ">
        <img src="img/16.jpg" width="200" />
    </div>-->

    <div class="stage">
        <div class="box">
            <img src="img/11.jpg" class="item" />

            <img src="img/12.jpg" class="item" />

            <img src="img/13.jpg" class="item" />

            <img src="img/14.jpg" class="item" />

            <img src="img/15.jpg" class="item" />

            <img src="img/16.jpg" class="item" />
        </div>
    </div>


</body>
</html>
